<template>
  <el-dialog
    width="80%"
    v-model="visible"
    @closed="onReset"
    append-to-body
    :title="dialogDatas.title"
    class="packageDialog"
  >
    <el-table
      :data="cooperationMealDatas"
      ref="multipleTableRef"
      style="width: 100%"
      @row-click="singleElection"
      highlight-current-row
      border
      @selection-change="handleSelectionChange"

    >
      <el-table-column type="selection" />

      <el-table-column property="mealName" label="套餐名称" />
      <el-table-column property="points" label="使用点数" />

      <el-table-column align="center" label="选择默认套餐" property="isDefault">
        <template #default="scope">
          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
          <el-radio class="radio" v-model="templateSelection" :label="scope.row.id"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
    </el-table>

    <template #footer v-if="!isDisabled">
      <span class="dialog-footer flex justify-center my6">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, nextTick } from 'vue';
import type { IUserItem } from '@/api/user/type';
import { cooperationMealRequest, selectMealRequest } from '@/api/cooperation/index';
import { ElTable } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus'
interface User {
  mealName: string;
  points: string;
  selection: string;
  id: number;
  isSelect: boolean;
  isDefault: boolean;
}
// defineProps({
//   dialogDatas: {
//     required: true
//   }
// });

//   当前选择的行的id
let templateSelection = ref(null);
let cooperationMealDatas = reactive([]);
//   [
//   {
//     id: 0,
//     mealName: 'A1',
//     points: 0,
//     isSelect: true,
//     isDefault: true
//   },
//   {
//     id: 1,
//     mealName: 'A2',
//     points: 0,
//     isSelect: true,
//     isDefault: false
//   },
//   {
//     id: 2,
//     mealName: 'A3',
//     points: 0,
//     isSelect: true,
//     isDefault: false
//   }
// ]
let selectDatas = reactive([]);
const visible = ref(false);
const formRef = ref();
let dialogDatas = ref({});
let defaultRow = ref({});//默认套餐


const multipleTableRef = ref();
//   当前选择的行的数据
const singleElection = (row) => {
  templateSelection.value = row.id;
  defaultRow=row
  // checkList = cooperationMealDatas.filter((item) => item.id === row.id);
};

watch(dialogDatas, async (newVal) => {});

const init = async (data?: IUserItem) => {
  // if (data) dialogDatas.value = Object.assign({}, dialogDatas.value, data);
  if (data) dialogDatas.value = JSON.parse(JSON.stringify(data));
  const datas: any = await cooperationMealRequest({
    orgId: dialogDatas.value.row.id
  });
  cooperationMealDatas = datas.data;
  visible.value = true;

  selectDatas = cooperationMealDatas.filter((item) => item.isSelect);
  templateSelection.value = cooperationMealDatas.filter((item) => item.isDefault)[0]?.id;
  defaultRow=cooperationMealDatas.filter((item) => item.isDefault)[0]
  toggleSelection(selectDatas);
  // dialogDatas = data!;
};
const toggleSelection = async (rows?: User[]) => {
  if (rows) {
    await nextTick();
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  }
};
const onReset = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
};
const onCancel = () => {
  //取消按钮事件
  onReset();
  visible.value = false;
  // emits('onCancel');
};
const onConfirm = async () => {
  selectDatas.forEach((item) => {
    item.mealId = item.id;
  });
  if(!selectDatas.some((item)=>item.id===templateSelection.value)){//当前勾选的套餐内不包含勾选的默认套餐
    ElMessage.error('请选择默认套餐')
    selectDatas.forEach((item)=>{
    item.isSelect=true
    })
    defaultRow.isDefault=true
    defaultRow.isSelect=false
    defaultRow.mealId = defaultRow.id;
    selectDatas.push(defaultRow)
    
  }else{//勾选的套餐包含勾选的默认套餐
    selectDatas.forEach((item)=>{
    item.isSelect=true
    item.isDefault=false
    if(item.id===templateSelection.value){
      item.isDefault=true
      item.isSelect=true
    }
    console.log(item.isDefault,"defaultRow.isDefault")
  })
  }



// if(!isDefault.value){
//   ElMessageBox.alert('默认套餐选择错误')

// }
  const data = {
    selectMeals: selectDatas,
    orgId: dialogDatas.value.row.id
  };
  await selectMealRequest(data);
  //确定按钮事件
  onReset();
  visible.value = false;
  // emits('onConfirm');
};
const handleSelectionChange = (val) => {
  selectDatas= val;
};
defineExpose({ init });

// const getCooperationMealDatas = async (datas: {}) => {
//   const data: any = await cooperationMealRequest(datas);
//   cooperationMealDatas = data.data;
// };

</script>

<style lang="scss">
.packageDialog {
}
</style>
